<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="../../vue.js"></script>
</head>

<body>
  <div id="app">
    <!-- <div v-if="type==='1'">1</div>
    <div v-else-if="type==='2'">2</div>
    <div v-else>3</div> -->

    <template v-if="loginType === 'username'">
      <label>Username</label>
      <input placeholder="Enter your username" key="aaa">
    </template>
    <template v-else>
      <label>Email</label>
      <input placeholder="Enter your email address" key="bb">
    </template>

    <button @click="handleClick">toggle</button>

    <!-- <span v-for='i in 10'>
      {{i}}<br>
    </span> -->

    <span v-for='i,item in users'>
      {{users[item]}}<br>
    </span>

  </div>

</body>
<script>



  var vm = new Vue({
    el: '#app',
    data: {
      loginType: 'username',
      users: {
        name: 'aaa',
        age: 19
      }
    },
    methods: {
      handleClick() {
        this.loginType == 'username' ? this.loginType = '' : this.loginType = 'username';
      }
    }
  })



</script>

</html>